import React, { Component } from "react";
import { Progress } from '../nProgress'

export function asyncComponent(importComponent) {
  class AsyncComponent extends Component<Record<string, never>, { component: null | any }> {
    constructor(props) {
      super(props);

      this.state = {
        component: null,
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({ component });
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : <Progress></Progress>;
    }
  }

  return AsyncComponent;
}
